<template>
  <div class="question-container">
	<!-- 基础题库  基础布局-->
    <div class="insertBtn">
      <el-button  plain size="small" @click="$router.push('/questions/new')">新增试题</el-button>
      <el-button  plain size="small"  @click="dialogVisible = true">批量导入</el-button>
      <el-dialog  title="批量导入" :visible.sync="dialogVisible" width="600px">
          <el-form label-width="130px">
            <el-form-item label="学科：" >
              <el-select v-model="reqParams.subjectID" placeholder="请选择" style="width:400px" >
                <el-option
                  v-for="item in subjectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          <!-- 点击文件上传 -->
          <el-form-item label="文件：">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <el-link>点击上传文件</el-link>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="lotsImport()">确 定</el-button>
          </span>
      </el-dialog>
    </div>

    <el-form :inline="true">
      <el-form-item label="学科">
          <el-select v-model="reqParams.subjectID" size="mini" style="width:140px;height:20px" placeholder="请选择">
            <el-option
              v-for="item in subjectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="难度">
          <el-select v-model="reqParams.difficulty" size="mini" style="width:140px;height:20px" placeholder="请选择">
            <el-option
              v-for="item in difficultyOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item style="width:233px" label="试题类型">
          <div class="choose">
            <el-select v-model="reqParams.questionType" size="mini" style="width:140px;height:20px" placeholder="请选择">
            <el-option
              v-for="item in questionTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          </div>
      </el-form-item>
      <el-form-item label="标签">
          <el-select v-model="reqParams.tags" size="mini" style="width:140px;height:20px" placeholder="请选择">
            <el-option
              v-for="item in tagsListOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="城市" style="width:330px">
          <el-select @change="getArea" v-model="reqParams.province" size="mini" style="width:140px;height:20px" placeholder="请选择">
            <el-option
              v-for="item in provinceOption"
              :key="item"
              :label="item"
              :value="item"
              >
            </el-option>
          </el-select>
          <el-select  v-model="reqParams.city" size="mini" style="width:140px;height:20px" placeholder="请选择">
            <el-option
              v-for="item in cityOption"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item style="width:230px" label="关键字">
        <el-input v-model="reqParams.keyword" style="width:160px" size="mini" placeholder="请输入题目编号/题干"></el-input>
      </el-form-item>
      <el-form-item style="width:230px" label="题目备注">
        <el-input v-model="reqParams.remarks" style="width:140px" size="mini" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item style="width:230px" label="企业简称">
        <el-input v-model="reqParams.shortName" style="width:140px" size="mini" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="方向">
        <el-select v-model="reqParams.direction" size="mini" style="width:140px;height:20px" placeholder="请选择">
          <el-option
            v-for="item in directionOption"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="width:200px" label="录入人">
          <el-select v-model="reqParams.creatorID" size="mini" style="width:140px;height:20px" placeholder="请选择">
            <el-option
              v-for="item in userOptions"
              :key="item.id"
              :label="item.username"
              :value="item.id">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item style="width:230px;padding:0px"  label="二级目录">
          <el-select v-model="reqParams.catalogID" size="mini" style="width:140px;height:20px" placeholder="请输入二级目录">
            <el-option
              v-for="item in catalogOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item style="display:right">
        <div class="btn-Group">
        <el-button @click="reset()" plain size="mini">清除</el-button>
        <el-button @click="search()" type="primary" size="mini">搜索</el-button>
        </div>
      </el-form-item>

    </el-form>
    <!-- 表格信息 -->
    <el-table :data="articles" border style="width: 100%">
      <el-table-column type="index" label="序号" width="50px">
      </el-table-column>
      <el-table-column label="试题编号" prop="number" width="90px">
      </el-table-column>
      <el-table-column label="学科" width="70px">
        <template slot-scope="scope">
          <span>{{scope.row.subject}}</span>
        </template>
      </el-table-column>
      <el-table-column label="题型" width="60px">
        <template slot-scope="scope">
          <span v-if="scope.row.questionType==1">单选</span>
          <span v-if="scope.row.questionType==2">多选</span>
          <span v-if="scope.row.questionType==3">简答</span>
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="140px">
      </el-table-column>
      <el-table-column label="录入时间" width="180px">
        <template slot-scope="scope">
          <span>{{scope.row.addDate | parseTimeByString}}</span>
        </template>
      </el-table-column>
      <el-table-column label="难度" width="50px">
        <template slot-scope="scope">
          <span v-if="scope.row.difficulty==1">简单</span>
          <span v-if="scope.row.difficulty==2">一般</span>
          <span v-if="scope.row.difficulty==3">困难</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="使用次数" width="70px">
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="100px">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
             <el-dropdown trigger="click">
                <el-link type="primary" @click="preview(scope.row.id)">预览</el-link>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item style="padding: 0px 10px;">
                  <el-button size="mini" @click="dialogVisibleOnly = true"  style="width:50px;text-align:center">单选</el-button>
                  <!-- 简答对应简单框 -->
                     <el-dialog
                      title="提示"
                      :visible.sync="dialogVisibleOnly"
                      width="30%">
                      <span>这是一段信息</span>
                      <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisibleOnly = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisibleOnly = false">确 定</el-button>
                      </span>
                    </el-dialog>
                </el-dropdown-item>
                <el-dropdown-item  style="padding: 0px 10px;"><el-button size="mini" style="width:50px;text-align:center">多选</el-button></el-dropdown-item>
                <el-dropdown-item  style="padding: 0px 10px;"><el-button size="mini" style="width:50px;text-align:center">简答</el-button></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          <el-link type="primary" @click="$router.push('/questions/new?id='+scope.row.id)">修改</el-link>
          <el-link type="primary" @click="delTest(scope.row.id)">删除</el-link>
          <el-link type="primary" @click="add(scope.row.id)">加入精选</el-link>

        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background style="text-align:center"
      layout="prev, pager, next, sizes,jumper"
      :page-sizes="[1,2,3,4]"
      :page-size="reqParams.pagesize"
      :current-page="reqParams.page"
      @current-change="CurrentChange"
      @size-change="SizeChange"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
// 基础题库列表
import * as base from '@/api/hmmm/questions.js'
// 基础题库删除
// 导入学科简单列表的接口
import {simple} from '@/api/hmmm/subjects.js'
// 导入 难度、状态、题型、放行、审核、发布状态的常量
import * as api from '@/api/hmmm/constants.js'
// 导入城市数据
import * as city from '@/api/hmmm/citys.js'
// 导入时间过滤器
// import * as Time from '@/filters/index.js'
// 导入标签
import {simple as tagList} from '@/api/hmmm/tags.js'
// 导入用户
import { simple as listUser } from '@/api/base/users.js'
// 导入二级目录
import { simple as listDirectorys } from '@/api/hmmm/directorys.js'

export default {
// filters: {
//     TimeChange(time) {
//       return Time.parseTimeByString(time, '{y}-{m}-{d} {h}:{i}')
//     }
//   },
  data() {
    return {
      // 操作单选框的内容
      dialogVisibleOnly: false,
      dialogVisible: false,
      reqParams: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 10
      },
      articles: [],
      total: 0,
      options: [],
      // 学科简单列表
      subjectOptions: [],
      difficultyOptions: api.difficulty,
      questionTypeOptions: api.questionType,
      // 城市简单列表
      provinceOption: city.provinces(),
      cityOption: [],
      directionOption: api.direction,
      // 标签简单列表
      tagsListOption: [],
      userOptions: [],
      // 二级目录
      catalogOptions: []

    }
  },
  created() {
    this.getQuestions()
    this.getSubject()
    this.getTagsList()
    this.getUserOptions()
    this.getCatalogOptions()
  },
  methods: {
    // 清除搜索框数据
    reset() {
      this.reqParams = {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 10
      }
    },
    // 实现搜索功能
    search() {
      this.reqParams.page = 1
      this.getQuestions()
    },
    // 当每页的条数改变的时候
    SizeChange(newSize) {
      this.reqParams.pagesize = newSize
      this.getQuestions()
    },
    // 分页切换
    CurrentChange(newPage) {
      this.reqParams.page = newPage
      this.getQuestions()
    },

    // 批量导入事件
    async lotsImport() {
      const data = await base.batch()
      console.log(data)
      this.dialogVisible = false
    },
    // 加入精选
    add() {
    },
    // 删除数据
    delTest(id) {
       this.$confirm('此操作将永久删除试题 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await base.remove({ id: id })
            .then(response => {
              this.$message.success('成功删除试题' + '!')
              // this.dataList.splice(user, 1)
              this.getQuestions()
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 预览功能
    preview() {

    },
    // 获取二级目录
    async getCatalogOptions() {
      // simple 是一个返回promise的函数
      const { data } = await listDirectorys()
      this.catalogOptions = data
    },
    // 获取用户
    async getUserOptions() {
      // simple 是一个返回promise的函数
      const { data } = await listUser()
      this.userOptions = data
    },
    // 获取选择的城市对应的地区
    getArea(item) {
      const pCity = city.citys(item)
      this.cityOption = pCity
      this.reqParams.city = null

    },
    // 获取标签
    async getTagsList() {
      const data = await tagList()
      this.tagsListOption = data.data
    },
    // 获取学科简单课表
    async getSubject() {
      const data = await simple()
      this.subjectOptions = data.data
    },
    // 获取基础题库列表
    async getQuestions() {
      const {data: res} = await base.list(this.reqParams)
      this.articles = res.items
      this.total = res.counts
    }

  }
}
</script>

<style lang="scss">
.question-container{
  background-color: #fff;
  padding-left:20px;
  font-size: 12px;

  .el-form-item{
    // // float: left;
    // width:180px;
   .el-form-item__label{
     padding:0 3px;
     font-weight: normal;
     text-align: center;
   }
  }

  .el-table th>.cell{
    text-align: center;
    font-weight: 400;
    font-size: 12px;
  }
  .el-link{
    padding: 0 4px;
  }
}

</style>
